<template>
<div style="display: flex;line-height: 60px;">
  <div style="margin-top: 8px;">
    <i :class="icon" style="font-size: 25px" @click="collapse"></i>
  </div>
  <div style="flex:1;text-align: center;font-size: 30px">
    <span>社团物品借用及领用系统</span>
  </div>
  <div style="margin-top: 8px;">
    <el-avatar :size="40":src="`${imagesrc}?${Date.now}`" :key="timer"></el-avatar>
  </div>

  <el-dropdown>
  <span class="el-dropdown-link">
    {{user.userName}}
    <i class="el-icon-arrow-down el-icon--right"></i>

  </span>

    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="toUser">个人资料</el-dropdown-item>
      <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      user:{},
      imagesrc:'',
      timer: ''

    }
  },
  methods:{
    handleLoad () {
      this.timer = new Date().getTime()
    },
    init(){
      this.user=JSON.parse(sessionStorage.getItem('CurUser'))
      this.imagesrc="https://zb-study-xzt.oss-cn-hangzhou.aliyuncs.com/javaweb-image/user"+this.user.userId+'.jpg'
    },
    logout(){
      this.$confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',  //确认按钮的文字显示
        type: 'warning',
        center: true, //文字居中显示
      })
          .then(() => {
            this.$message({
              type:'success',
              message:'退出登录成功'
            })
            this.$router.push('/')
            sessionStorage.clear()
          })
          .catch(() => {
            this.$message({
              type:'info',
              message:'已取消登录'
            })
          });
    },
    toUser(){
      console.log('to_user')
      this.$router.push('/Home')
    },
    //子组件像父组件传值
    collapse(){
      this.$emit('doCollapse')
    }
  },
  props:{
    icon:String
  },
  created() {
    this.init()
    this.handleLoad()
    this.$router.push('/Home')
  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>